import { createSearchParams, URLSearchParamsInit, useNavigate } from "react-router-dom"
import styled from "styled-components"

const SName = styled.div`
	text-decoration: underline;
	cursor: pointer;
	color: #58a3f7;
`
const TableContentLink = ({ name, to, queryParams }: { name: string; to: string; queryParams: URLSearchParamsInit }) => {
	const navigate = useNavigate()

	const handleClick = () => {
		navigate({ pathname: to, search: `?${createSearchParams(queryParams)}` })
	}

	return <>{name ? <SName onClick={handleClick}>{name}</SName> : <div>-</div>}</>
}

export default TableContentLink
